import { useLayoutEffect, useRef } from "react";
import { apps } from "../../defines/allapps";

export default function TwoCubes() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
    const hasRuned = useRef(false);
    const currentApp = apps.find((a) => a.name === "TwoCubes");
    useLayoutEffect(() => {
      const canvas = canvasRef.current as HTMLCanvasElement;
      if (!canvas) {
        console.error("Canvas element not found");
        return;
      }
      if (hasRuned.current) {
        return; 
      }
      hasRuned.current = true;
      currentApp?.instance.run(canvas);
      // Your WebGPU initialization code here...
    }, []);
    return (
        <canvas
          id="gpuCanvas"
          style={{ width: "100%", height: "100%" }}
          ref={canvasRef}
        >
          <p>Your browser does not support the canvas element.</p>
        </canvas>
    );
}